<template>
  <!-- 城市/时间/主题筛选 -->
  <div class="city-time-select">
    <van-dropdown-menu>
      <!-- v-model	当前选中项对应的 value -->
      <!-- 城市选择 -->
      <van-dropdown-item v-model="state.value" :title="city">
        <van-tree-select
          v-model:active-id="state.activeId"
          v-model:main-active-index="state.activeIndex"
          :items="items"
          @click-item="selectCity"
        />
      </van-dropdown-item>
      <!-- 时间选择 -->
      <van-dropdown-item :title="title" ref="item">
        <div style="padding: 5px 16px">
          <p class="time">时间</p>
          <ul class="time-select-list">
            <li
              v-for="(value, index) of timeSelectList"
              :key="value"
              @click="timeSelect(value, index)"
              :class="[istrue === index ? 'istrue' : '']"
            >
              {{ value }}
            </li>
          </ul>
          <!-- 重置/确定按钮 -->
          <div class="two-button">
            <van-button
              type="danger"
              block
              round
              class="left-button"
              @click="reset"
            >
              重置
            </van-button>
            <van-button
              type="danger"
              block
              round
              @click="onConfirm"
              class="right-button"
            >
              确认
            </van-button>
          </div>
        </div>
      </van-dropdown-item>
      <!-- 主题筛选 -->
      <van-dropdown-item v-model="state.value" :title="home" ref="item3">
        <van-picker
          title="主题"
          :columns="columns"
          @confirm="onConfirm3"
          @cancel="onCancel"
        />
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  setup() {
    const item = ref(null);
    const item3 = ref(null);
    const state = reactive({
      value: 0,
      activeId: +localStorage.getItem("activeId") || 1,
      activeIndex: +localStorage.getItem("activeIndex") || 0,
    });
    // 主题
    const home = ref("按主题筛选");
    const columns = ["游戏", "读书", "兵法", "课堂", "旅行", "饮食", "金钱"];
    const onConfirm3 = (value) => {
      home.value = value;
      item3.value.toggle();
    };
    const onCancel = () => item3.value.toggle();
    // selectCity点击右侧选择项时触发
    // data: 该点击项的数据
    const selectCity = (data) => {
      city.value = data.text + "市";
      localStorage.setItem("city", city.value);
      localStorage.setItem("activeIndex", state.activeIndex);
      localStorage.setItem("activeId", state.activeId);
    };
    // 城市列表
    const items = [
      {
        text: "浙江",
        children: [
          { text: "杭州", id: 1 },
          { text: "温州", id: 2 },
          { text: "宁波", id: 3 },
          { text: "嘉兴", id: 4 },
          { text: "金华", id: 5 },
          { text: "台州", id: 6 },
        ],
      },
      {
        text: "江苏",
        children: [
          { text: "南京", id: 5 },
          { text: "无锡", id: 6 },
          { text: "徐州", id: 7 },
          { text: "苏州", id: 8 },
          { text: "南通", id: 9 },
          { text: "扬州", id: 10 },
        ],
      },
    ];
    // 时间筛选列表
    const timeSelectList = reactive([
      "不限",
      "今天",
      "明天",
      "本周末",
      "本周内",
      "本月内",
      "自定义日期",
    ]);
    const istrue = ref(0);
    // 时间选择改变样式
    const timeSelect = (value, index) => {
      istrue.value = index;
      empty.value = value;
    };
    // 重置按钮
    const reset = () => {
      istrue.value = 0;
      empty.value = timeSelectList[0];
    };
    // 按时间筛选
    const empty = ref("");
    const title = ref("按时间筛选");
    const city = ref(localStorage.getItem("city") || "杭州市");
    // 按时间筛选确定按钮
    const onConfirm = () => {
      item.value.toggle();
      title.value = empty.value || "不限";
    };
    return {
      item,
      item3,
      state,
      onConfirm,
      timeSelectList,
      istrue,
      timeSelect,
      reset,
      title,
      empty,
      items,
      selectCity,
      city,
      columns,
      onCancel,
      onConfirm3,
      home,
    };
  },
};
</script>

<style lang="less">
.city-time-select {
  .van-popup {
    .time {
      font-size: 13px;
      margin-bottom: 12px;
    }
    .time-select-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 42px;
      li {
        margin-bottom: 10px;
        width: 108px;
        height: 32px;
        border: 1px solid #ebebeb;
        border-radius: 5px;
        text-align: center;
        line-height: 32px;
        font-size: 13px;
        &.istrue {
          border: 1px solid #e0d74d;
        }
      }
    }
    // 重置/确定按钮
    .two-button {
      display: flex;
      justify-content: space-between;
      // 重置按钮
      .left-button {
        width: 110px;
        height: 36px;
        border: 1px solid #e0d74d;
        border-radius: 18px;
        background-color: white;
        color: #333333;
        font-size: 13px;
      }
      // 确定按钮
      .right-button {
        width: 215px;
        height: 36px;
        background-color: #fdd303;
        border-radius: 18px;
        border: 1px solid #fdd303;
        color: #333333;
        font-size: 13px;
      }
    }
  }
  // 城市/时间/主题选择
  .van-dropdown-menu__bar {
    margin-bottom: 25px;
  }
}
</style>
